<template>
  <div class="flex3 positionR flexC AlignItemsC left_box">
    <ul class="color_name_ul flex">
      <li class="font_s12 flex"
          v-for="(item, index) in colorNameList"
          :key="index">
        <i class="color_box"
           :style="{background: item.colorStyle}"></i>
        {{item.name}}
      </li>
    </ul>
    <div class="scrollBar positionR"
         style="width: 100%">
      <ul class="ranking_list_ul flex1"
          ref="list"
          id="list">
        <!--    @mouseover="hover(index)"-->
        <li v-for="(item, index) in list"
            :key=index
            @click="tabItemFun(index)"
            :id="'item' + index"
            :class="{bk_lig: nameIndex == index}"
            @mouseenter="enters(item, index)"
            @mouseleave="leaver(item, index)"
            class="font_s16 flex AlignItemsC positionR">
          <p class="font_s22 num"
             :class="index > 3 ? orange_color : orange_color"
             :style="{background: 'url('+ rankingImg[index] +') no-repeat', backgroundSize: '100% 100%'}">
            {{index+1}}
          </p>
          <p v-html="item.orgName"
             style="height: 4.75rem;text-align: center;width: 6rem"
             class="JustifyContentC AlignItemsC flex">{{item.orgName}}</p>
          <div class="flex1"
               style="height: 100%;">
            <column-echart-view :height=heightStyle
                                :arrX=columnXList
                                :arrY=item.areaList
                                :colors=colorList />
          </div>
          <div v-if="typeInde === index"
               class="pop font_s16">
            <t-d-info-item :infoObject= infoObject v-if="TypeIndex === 0" />
            <m-x-info-item :infoObject= infoObject v-if="TypeIndex === 1" />
            <r-y-info-item :infoObject= infoObject v-if="TypeIndex === 2" />
          </div>
        </li>
      </ul>
     <!-- <div v-if="showPop"
           class="pop2 font_s16">
        <t-d-info-item :infoObject= gmObject v-if="TypeIndex === 0" />
        <m-x-info-item :infoObject= gmObject v-if="TypeIndex === 1" />
        <r-y-info-item :infoObject= gmObject v-if="TypeIndex === 2" />
      </div>-->
    </div>
  </div>
</template>

<script>
import Bus from '../../../assets/bus.js'
import ColumnEchartView from "./echarts/ColumnEchartView";
import TDInfoItem from "./TDInfoItem";
import MXInfoItem from "./MXInfoItem";
import RYInfoItem from "./RYInfoItem";
export default {
  name: "FxypLeft",
  components: { TDInfoItem, MXInfoItem, RYInfoItem, ColumnEchartView },
  props: {
    nameTx: {
      type: String,
      default: ''
    },
    TypeIndex: [String, Number],
    OrgNameIndex: [String, Number],
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  watch: {
    nameTx: function (val) {
      this.nameTx = val
    },
    list: function (val) {
      let itemObject = JSON.parse(localStorage.getItem('name'))
      val.forEach((item, index) => {
        if (item.orgName === itemObject.orgName) {
          document.getElementById('item' + index).scrollIntoView()
          this.typeInde = index
          this.nameIndex = index
          this.infoObject = item
        }
      })
    }
  },
  data () {
    return {
      showPop: false,
      colorNameList: [],
      colorNameList1: [
        { colorStyle: '#63E3FB', name: '占地面积' },
        { colorStyle: '#E78862', name: '批复面积' },
        { colorStyle: '#41A0E2', name: '已用面积' },
        { colorStyle: '#6FF7B1', name: '剩余可造墓面积' },
      ],
      colorNameList2: [
        { colorStyle: '#63E3FB', name: '已建造数' },
        { colorStyle: '#E78862', name: '已销售数' },
        { colorStyle: '#41A0E2', name: '已落葬数' },
        { colorStyle: '#6FF7B1', name: '未销售数' },
      ],
      colorNameList3: [
        { colorStyle: '#63E3FB', name: '从业总人数' },
        { colorStyle: '#E78862', name: '35岁以下人数' },
        { colorStyle: '#41A0E2', name: '本科以上人数' },
        { colorStyle: '#6FF7B1', name: '有墓地管理员资质人数' },
      ],
      orange_color: '#D27910',
      orange_color2: '#F9DD6A',
      rankingImg: [
        require('../../../assets/img/fxyp/one.png'),
        require('../../../assets/img/fxyp/two.png'),
        require('../../../assets/img/fxyp/three.png')
      ],
      rankingList: [],
      newList: [],
      typeInde: -1,
      gmObject: {
        title: '',
        zdmj: 0,
        pfmj: 0,
        yymj: 0,
        zmmj: 0
      },
      heightStyle: '96%',
      columnXList: ['占地面积', '批复面积', '已用面积', '剩余可造墓面积'],
      columnYList: [78, 90, 120, 128],
      colorList: ['#63E3FB', '#E78862', '#41A0E2', '#6FF7B1'],
      gmName: '',
      nameIndex: -1,
      infoObject: Object
    }
  },
  mounted () {
    this.colorNameList = this.colorNameList1
    Bus.$on('classId', (val) => {
      this.nameIndex = val
    })
    Bus.$on('tabIndex', (val) => {
      if (val === 0) {
        this.colorNameList = this.colorNameList1
      } else if (val === 1) {
        this.colorNameList = this.colorNameList2
      } else if (val === 2) {
        this.colorNameList = this.colorNameList3
      }
    })
    Bus.$on('gm_name', (val) => {
      console.log('item:', val)
      console.log('list:', this.list)
      this.gmName = val.orgName
      // this.showPop = true
      this.gmObject = val
      this.list.forEach((item, index) => {
        if (item.orgName === val.orgName) {
          document.getElementById('item' + index).scrollIntoView()
          this.typeInde = index
          this.nameIndex = index
          this.infoObject = item
        }
      })
    })
  },
  destroyed () {
    localStorage.setItem('name', '')
  },
  methods: {
    tabItemFun (index) {
       // this.nameIndex = index
    },
    enters (info, index) {
      this.typeInde = index
      this.infoObject = info
      this.showPop = false
    },
    leaver (info, index) {
      this.typeInde = index
      this.infoObject = info
      this.showPop = false
    }
  }
}
</script>

<style scoped lang="scss">
.bk_lig {
  border: 2px solid #56c5ff;
  border-radius: 10px;
}
.left_box {
  height: 71vh;
  overflow: hidden;
  margin-right: 1rem;
  background: url("../../../assets/img/fxyp/left_bg.png");
  background-size: 100% 100%;
  padding: 1.4rem 1rem;
  .pop2 {
    background: rgba(5, 18, 51, 0.8);
    padding: 1rem 1.5rem;
    border: 1px solid #75fbfe;
    color: #cef9fc;
    position: absolute;
    left: 5rem;
    top: 16rem;
    z-index: 3;
    .pop_name {
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #72ffff;
      text-align: center;
      margin-bottom: 1rem;
    }
    p {
      line-height: 1.8rem;
    }
  }
  .pop {
    background: rgba(5, 18, 51, 0.8);
    padding: 1rem 1.5rem;
    border: 1px solid #75fbfe;
    color: #cef9fc;
    position: absolute;
    left: 5rem;
    top: -2rem;
    z-index: 3;
    .pop_name {
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #72ffff;
      text-align: center;
      margin-bottom: 1rem;
    }
    p {
      line-height: 1.8rem;
    }
  }
  .color_name_ul {
    width: 100%;
  }
  .color_name_ul li {
    width: 24%;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #cef9fc;
    float: left;
    display: flex;
    align-items: center;
    i {
      width: 1rem;
      height: 1rem;
      margin-right: 0.2rem;
    }
  }
  .color_name_ul li:last-child {
    width: 27%;
  }
  .ranking_list_ul {
    width: 100%;
    margin-top: 1rem;
  }
  .orange_color {
    color: #d27910 !important;
  }
  .orange_color2 {
    color: #f9dd6a !important;
    overflow-y: auto;
  }
  .scrollBar {
    overflow-y: auto;
  }
  .scrollBar::-webkit-scrollbar {
    width: 0;
    border-radius: 0;
    background-color: rgba($color: #00000000, $alpha: 0);
  }
  .scrollBar::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: rgba($color: #00000000, $alpha: 0);
  }
  .ranking_list_ul li {
    height: 4.75rem;
    padding: 0.6rem 0.4rem;
    box-sizing: border-box;
    background: url("~@/assets/img/fxyp/ranking_bg.png") no-repeat;
    background-size: 100% 100%;
    font-family: Microsoft YaHei;
    margin-bottom: 1rem;
    font-weight: 400;
    color: #cef9fc;
    .num {
      width: 2.5rem;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      margin: 0 0.3rem 0 1rem;
      font-family: Impact;
      font-weight: 400;
      color: #f9dd6a;
    }
  }
}
</style>